<template>
	<view class="myAuth">
		<u--form labelPosition="left" :model="formData" :rules="rules" ref="form1">
			<u-form-item label="姓名" prop="name" borderBottom ref="item1" labelWidth="100">
				<u--input v-model="formData.name" border="none" placeholder="请输入内容"></u--input>
			</u-form-item>
			<u-form-item label="手机号" prop="phone" borderBottom ref="item1" labelWidth="100">
				<u--input v-model="formData.phone" border="none" placeholder="请输入内容"></u--input>
			</u-form-item>
			<u-form-item label="身份证号" prop="card" borderBottom ref="item1" labelWidth="100">
				<u--input v-model="formData.card" border="none" placeholder="请输入内容"></u--input>
			</u-form-item>
		</u--form>
		<u-button class="custom-style" shape="circle" text="提交审核"
			customStyle="background-color: #00C777;color:#fff;margin-top:70px" @click="goAuth"></u-button>
	</view>
</template>

<script>
	import {
		userAuth
	} from '@/request/api.js'
	export default {
		data() {
			return {
				formData: {
					phone: '',
					card: '',
					name: ''
				},
				rules: {
					'name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'card': {
						type: 'string',
						required: true,
						message: '请填写身份证',
						trigger: ['blur', 'change']
					},
					'phone': {
						required: true,
						message: '请输入正确的手机号码',
						trigger: ['change', 'blur'],
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// this.$u.test.mobile()就是返回true或者false的
							return this.$u.test.mobile(value);
						},
					}
				}
			}
		},
		methods: {
			goAuth() {
				this.$refs.form1.validate().then(res => {
					userAuth(this.formData).then(res => {
						if (res.code == 1) {
							uni.navigateTo({
								url: '/my_pages/components/success?title=实名认证已提交请等待审核'
							})
							for (let k in this.formData) {
								this.formData[k] = ''
							}
						}
					})
				}).catch(errors => {
					uni.$u.toast('请正确填写信息')
				})
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.form1.setRules(this.rules)
		},
	}
</script>

<style lang="scss" scoped>
	.myAuth {
		padding: 20rpx 15rpx;
	}
</style>
